<template>
	<!-- 背景灰色部分 -->
	<el-container class="bg">
		<!-- 主体内容 -->
		<el-container style="margin-top: 15px;">
			<!-- 左侧用户信息及其功能 -->
			<el-aside style="margin-left: 13%; background-color: white">
				<Aside></Aside>
			</el-aside>
			<!-- 右侧内容 -->
			<el-container style="margin-right: 13%; background-color: white;">
				<el-header style="background-color: white">
					<el-row>
            <!-- 路由跳转 -->
						<el-menu :default-active="activeIdx" mode="horizontal" :router="true">
              <el-menu-item v-for="(item, index) in navList" :key="index" :index="item.name">
                {{ item.navItem }}
              </el-menu-item>
						</el-menu>
					</el-row>
				</el-header>
				<!-- 要显示的内容 -->
				<el-main>
					<router-view />
				</el-main>
			</el-container>
		</el-container>
		<!-- 页脚内容 -->
		<el-footer align="center">
			©2023毕业实习 - 失物招领系统
		</el-footer>
	</el-container>
</template>

<script>
import Aside from "./aside/index.vue"

export default {
  components: { Aside },
  data() {
    return {
      navList:[
        { name:'/user/all', navItem:'所有' },
        { name:'/user/publish', navItem:'发布' },
        { name:'/user/message', navItem:'消息' },
        { name:'/user/mine', navItem:'我的' }
      ]
    }
  },
  computed: {
    activeIdx() {
      const { name } = this.$route
      switch (name) {
        case 'all':
          return '/user/all'
        case 'mine':
          return '/user/mine'
        case 'message':
          return '/user/message'
        case 'publish':
          return '/user/publish'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$white: #ffffff;
$bg: #f7f7f7;

.bg {
  background-color: $bg;
}

ul li {
  margin-left: 10px;
}

.el-footer {
  margin-top: 20px;
  font-size: 15px;
  color: #5f5f5f;
}
</style>
